<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DevTest 应用测试平台</title>
    <link rel="stylesheet" href="/3rdparty/layui/css/layui.css">
    <style>
        h1 {
            line-height: 60px;
            font-weight: bold;
        }

        [v-cloak] {
            display: none;
        }

        .logoutbtn {
            float: right;
            margin-top: -50px;
        }
    </style>
</head>
<body>
<div class="layui-container" id="app" v-cloak>
    <div class="layui-card">
        <div class="layui-card-body">
            <h1><a href="/">DevTest 应用测试平台</a></h1>
            <button type="button" class="layui-btn layui-btn-danger logoutbtn" @click="logout">Logout</button>
        </div>
    </div>
    <div class="layui-col-xs4">
        <div class="layui-card">
            <div class="layui-card-header" style="font-size: 20px;">{{username}}</div>
            <div class="layui-card-body">
                <div>
                    <a href="/user">
                        <button class="layui-btn">Following<span class="layui-badge layui-bg-gray" id="following">{{followData.following}}</span>
                        </button>
                    </a>
                </div>
                <br>
                <div>
                    <a href="/user">
                        <button class="layui-btn layui-btn-warm">Followers<span class="layui-badge layui-bg-gray"
                                                                                id="followers">{{followData.followers}}</span>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs8">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-col-xs10">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="search by username"
                                   class="layui-input" v-model="searchName">
                        </div>
                        <div class="layui-col-xs2" style="text-align: center">
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1" @click="search">
                                Search
                            </button>
                        </div>
                        <div class="layui-tab-item layui-show" v-if="searchResult.length > 0">
                            <h4>Search Result</h4>
                            <table class="layui-table" lay-even="" lay-skin="nob">
                                <colgroup>
                                    <col width="150">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>User Name</th>
                                    <th>Email</th>
                                    <th>Operation</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="user in searchResult">
                                    <td>{{user.userName}}</td>
                                    <td>{{user.email}}</td>
                                    <td>
                                        <button type="button" class="layui-btn layui-btn-disabled"
                                                title="you can not follower yourself" v-if="loginUserId == user.userId">
                                            follow
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-normal"
                                                title="follow this user" @click="follow(user.userId)" v-else>
                                            follow
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 60px;">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">Following</li>
                            <li>Followers</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table class="layui-table" lay-even="" lay-skin="nob">
                                    <colgroup>
                                        <col width="150">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>User Name</th>
                                        <th>Email</th>
                                        <th>Operation</th>
                                    </tr>
                                    </thead>
                                    <tbody id="followingTable">
                                    <tr v-for="following in followData.followingList">
                                        <td>{{following.userName}}</td>
                                        <td>{{following.email}}</td>
                                        <td>
                                            <button type="button" class="layui-btn layui-btn-warm"
                                                    title="unfollow this user" @click="unfollow(following.userId)">
                                                unfollow
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="layui-tab-item">
                                <table class="layui-table" lay-even="" lay-skin="nob">
                                    <colgroup>
                                        <col width="150">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>User Name</th>
                                        <th>Email</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="follower in followData.followersList">
                                        <td>{{follower.userName}}</td>
                                        <td>{{follower.email}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/3rdparty/layui/layui.js"></script>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/status-check.js"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;
    });

    var app = new Vue({
        el: '#app',
        data: {
            followData: {
                following: '--',
                followers: '--',
                followersList: [],
                followingList: []
            },
            username: $.cookie('userName'),
            loginUserId: $.cookie('userId'),
            searchName: '',
            searchResult: []
        },
        mounted() {
            this.countFollowed();
            this.countFollowers();
            this.loadFollowers();
            this.loadFollowing();
        },
        methods: {
            async countFollowed() {
                let res = await axiosReq('get', "/users/" + $.cookie('userId') + "/followed/count");
                this.followData.following = res.data;
            },
            async countFollowers() {
                let res = await axiosReq('get', "/users/" + $.cookie('userId') + "/followers/count");
                this.followData.followers = res.data;
            },
            async loadFollowers() {
                let res = await axiosReq('get', "/users/" + $.cookie('userId') + "/followers");
                this.followData.followersList = res.data;
            },
            async loadFollowing() {
                let res = await axiosReq('get', "/users/" + $.cookie('userId') + "/followed");
                this.followData.followingList = res.data;
            },
            async logout() {
                await axiosReq('post', "/users/logout", {"token": $.cookie('token')});
                this.countFollowed();
            },
            async unfollow(userId) {
                await axiosReq('post', "/users/" + userId + "/unfollow");
                this.loadFollowing();
                this.countFollowed();
            },
            async follow(userId) {
                let res = await axiosReq('post', "/users/" + userId + "/follow");
                alert(res.msg);
                this.loadFollowing();
                this.countFollowed();
            },
            async search() {
                let res = await axiosReq('get', "/users/search/" + this.searchName);
                this.searchResult = res.data;
            }
        }
    })
</script>


</html>